
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生课程管理</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .table-container {
            margin-top: 20px;
        }
        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
        .form-container {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            background-color: #f8f9fa;
        }
        .action-buttons {
            white-space: nowrap;
        }
        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            width: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="my-4">学生课程管理</h2>

    <!-- 添加学生课程表单 -->
    <div class="form-container">
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addModal">
            <i class="fas fa-plus"></i> 添加学生课程
        </button>

        <!-- 搜索表单 -->
        <form id="searchForm" class="row g-3">
            <div class="col-md-3">
                <label for="searchStudentNo" class="form-label">学号:</label>
                <input type="number" class="form-control" id="searchStudentNo" placeholder="输入学号">
            </div>
            <div class="col-md-3">
                <label for="searchCourseNo" class="form-label">课程号:</label>
                <input type="number" class="form-control" id="searchCourseNo" placeholder="输入课程号">
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="fas fa-search"></i> 查询
                </button>
                <button type="button" class="btn btn-secondary" id="resetBtn">
                    <i class="fas fa-undo"></i> 重置
                </button>
            </div>
        </form>
    </div>

    <!-- 学生课程表格 -->
    <div class="table-container">
        <table class="table table-striped table-hover">
            <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>学号</th>
                <th>课程号</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="dataTable">
            <!-- 数据将通过Ajax动态加载 -->
            </tbody>
        </table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
        <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination">
                <!-- 分页将通过Ajax动态生成 -->
            </ul>
        </nav>
    </div>
</div>

<!-- 添加模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalLabel">添加学生课程</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="addForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="studentNo" class="form-label">学号:</label>
                        <input type="number" class="form-control" id="studentNo" required>
                    </div>
                    <div class="mb-3">
                        <label for="courseNo" class="form-label">课程号:</label>
                        <input type="number" class="form-control" id="courseNo" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">修改学生课程</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editForm">
                <div class="modal-body">
                    <input type="hidden" id="editId">
                    <div class="mb-3">
                        <label for="editStudentNo" class="form-label">学号:</label>
                        <input type="number" class="form-control" id="editStudentNo" required>
                    </div>
                    <div class="mb-3">
                        <label for="editCourseNo" class="form-label">课程号:</label>
                        <input type="number" class="form-control" id="editCourseNo" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 提示消息容器 -->
<div class="alert-container"></div>

<!-- 引入jQuery和Bootstrap JS -->
<script src="js/stu_cour/min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function() {
        let currentPage = 1;
        const pageSize = 10;

        // 初始化页面
        loadData();

        // 添加学生课程
        $('#addForm').submit(function(e) {
            e.preventDefault();
            const formData = {
                studentNo: $('#studentNo').val(),
                courseNo: $('#courseNo').val()
            };

            $.ajax({
                url: '/studentCourse/add',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.msg === 'success') {
                        showAlert('添加成功', 'success');
                        $('#addModal').modal('hide');
                        $('#addForm')[0].reset();
                        loadData();
                    } else {
                        showAlert('添加失败: ' + (response.error || '未知错误'), 'danger');
                    }
                },
                error: function(xhr) {
                    showAlert('请求失败: ' + xhr.statusText, 'danger');
                }
            });
        });

        // 搜索表单提交
        $('#searchForm').submit(function(e) {
            e.preventDefault();
            currentPage = 1;
            loadData();
        });

        // 重置搜索
        $('#resetBtn').click(function() {
            $('#searchStudentNo').val('');
            $('#searchCourseNo').val('');
            currentPage = 1;
            loadData();
        });

        // 加载数据
        function loadData() {
            const studentNo = $('#searchStudentNo').val();
            const courseNo = $('#searchCourseNo').val();

            $.ajax({
                url: '/studentCourse/page',
                type: 'GET',
                data: {
                    studentNo: studentNo,
                    courseNo: courseNo,
                    current: currentPage,
                    pageSize: pageSize
                },
                success: function(response) {
                    renderTable(response.records);
                    renderPagination(response.total, response.pages);
                },
                error: function(xhr) {
                    showAlert('加载数据失败: ' + xhr.statusText, 'danger');
                }
            });
        }

        // 渲染表格数据
        function renderTable(data) {
            const $tableBody = $('#dataTable');
            $tableBody.empty();

            if (data.length === 0) {
                $tableBody.append('<tr><td colspan="4" class="text-center">暂无数据</td></tr>');
                return;
            }

            data.forEach(item => {
                const row = `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.studentNo}</td>
                        <td>${item.courseNo}</td>
                        <td class="action-buttons">
                            <button class="btn btn-sm btn-warning me-2 edit-btn" data-id="${item.id}">
                                <i class="fas fa-edit"></i> 修改
                            </button>
                            <button class="btn btn-sm btn-danger delete-btn" data-id="${item.id}">
                                <i class="fas fa-trash-alt"></i> 删除
                            </button>
                        </td>
                    </tr>
                `;
                $tableBody.append(row);
            });

            // 绑定编辑按钮事件
            $('.edit-btn').click(function() {
                const id = $(this).data('id');
                const row = $(this).closest('tr');
                const studentNo = row.find('td:eq(1)').text();
                const courseNo = row.find('td:eq(2)').text();

                $('#editId').val(id);
                $('#editStudentNo').val(studentNo);
                $('#editCourseNo').val(courseNo);

                $('#editModal').modal('show');
            });

            // 绑定删除按钮事件
            $('.delete-btn').click(function() {
                const id = $(this).data('id');
                deleteStudentCourse(id);
            });
        }

        // 渲染分页
        function renderPagination(total, pages) {
            const $pagination = $('#pagination');
            $pagination.empty();

            if (pages <= 1) return;

            // 上一页
            $pagination.append(`
                <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                    <a class="page-link" href="#" aria-label="Previous" data-page="${currentPage - 1}">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            `);

            // 页码
            for (let i = 1; i <= pages; i++) {
                $pagination.append(`
                    <li class="page-item ${i === currentPage ? 'active' : ''}">
                        <a class="page-link" href="#" data-page="${i}">${i}</a>
                    </li>
                `);
            }

            // 下一页
            $pagination.append(`
                <li class="page-item ${currentPage === pages ? 'disabled' : ''}">
                    <a class="page-link" href="#" aria-label="Next" data-page="${currentPage + 1}">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            `);

            // 绑定分页点击事件
            $('.page-link').click(function(e) {
                e.preventDefault();
                const page = $(this).data('page');
                if (page && page !== currentPage) {
                    currentPage = page;
                    loadData();
                }
            });
        }

        // 编辑表单提交
        $('#editForm').submit(function(e) {
            e.preventDefault();
            const formData = {
                id: $('#editId').val(),
                studentNo: $('#editStudentNo').val(),
                courseNo: $('#editCourseNo').val()
            };

            $.ajax({
                url: '/studentCourse/update',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.msg === 'success') {
                        showAlert('修改成功', 'success');
                        $('#editModal').modal('hide');
                        loadData();
                    } else {
                        showAlert('修改失败: ' + (response.error || '未知错误'), 'danger');
                    }
                },
                error: function(xhr) {
                    showAlert('请求失败: ' + xhr.statusText, 'danger');
                }
            });
        });

        // 删除学生课程
        function deleteStudentCourse(id) {
            if (!confirm('确定要删除这条记录吗？')) return;

            $.ajax({
                url: '/studentCourse/delete?id=' + id,
                type: 'DELETE',
                success: function(response) {
                    if (response.msg === 'success') {
                        showAlert('删除成功', 'success');
                        loadData();
                    } else {
                        showAlert('删除失败: ' + (response.error || '未知错误'), 'danger');
                    }
                },
                error: function(xhr) {
                    showAlert('请求失败: ' + xhr.statusText, 'danger');
                }
            });
        }

        // 显示提示消息
        function showAlert(message, type) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            $('.alert-container').append(alertHtml);

            // 3秒后自动消失
            setTimeout(() => {
                $('.alert').alert('close');
            }, 3000);
        }
    });
</script>
</body>
</html>